<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
    <script type="text/babel">
        class App extends React.Component{
            // 1- 定义实例属性，值为React.createRef()
            // 2- 将实例属性作为React元素的ref属性值
            myDiv=React.createRef();
            userName=React.createRef();
            child=React.createRef();
            render(){
                return(
                    <form>
                        <div ref={this.myDiv}>100</div>
                        <input ref={this.userName} name={"userName"} type="text"/ >100
                        <Child ref={this.child}/>
                        <button onClick={(e)=>{
                            e.preventDefault();
                            <p>{this.myDiv.current.innerText}</p>
                            console.log(this.userName.current.value);
                            console.log(this.child.current.state.a);
                            console.log(this.child.current.state.b);
                            this.child.current.setState({
                                a:100,b:200
                            })
                        }}>点击
                            </button>
                    </form>
                )
            }
        }
        class Child extends React.Component{
            state = {
                    a:1,
                    b:2
            }
            render(){
                return(
                    <div>
                        <h3>Child</h3>
                        <p>a:{this.state.a}</p>
                        <p>b:{this.state.b}</p>        
                    </div>
                )
            }
        }
        ReactDOM.createRoot(document.getElementById('root')).render(<App/>)
    </script>
    
</body>
</html>